<template>
  <div>
    <div class="main-wrap">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定邮箱</strong> / <small>Bind&nbsp;Email</small>
        </div>
      </div>
      <hr />
      <!--进度条-->
      <div class="m-progress">
        <div class="m-progress-list">
          <span class="step-1 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">1<em class="bg"></em></i>
            <p class="stage-name">绑定邮箱</p>
          </span>
          <span class="step-2 step">
            <em class="u-progress-stage-bg"></em>
            <i class="u-stage-icon-inner">2<em class="bg"></em></i>
            <p class="stage-name">完成</p>
          </span>
          <span class="u-progress-placeholder"></span>
        </div>
        <div class="u-progress-bar total-steps-2">
          <div class="u-progress-bar-inner"></div>
        </div>
      </div>
      <form class="am-form am-form-horizontal">
        <div class="am-form-group bind" v-if="old">
          <label for="user-phone" class="am-form-label">原邮箱地址</label>
          <div class="am-form-content">
            <span id="user-phone">{{old}}</span>
          </div>
        </div>
        <div class="am-form-group code" v-if="old">
          <label for="user-code" class="am-form-label">验证码</label>
          <div class="am-form-content">
            <input type="tel" id="user-code" placeholder="验证码" v-model="oldVerify">
          </div>
          <a class="btn" href="javascript:void(0);" v-on:click="getVerify(old)" id="sendMobileCode">
            <div class="am-btn am-btn-danger">验证码</div>
          </a>
        </div>
        <div class="am-form-group">
          <label for="user-new-phone" class="am-form-label">新邮箱地址</label>
          <div class="am-form-content">
            <input type="tel" id="user-new-phone" placeholder="绑定新邮箱地址" v-model="now">
          </div>
        </div>
        <div class="am-form-group code">
          <label for="user-new-code" class="am-form-label">验证码</label>
          <div class="am-form-content">
            <input type="tel" id="user-new-code" placeholder="验证码" v-model="nowVerify">
          </div>
          <a class="btn" href="javascript:void(0);" v-on:click="getVerify(now)" id="sendMobileCode">
            <div class="am-btn am-btn-danger">验证码</div>
          </a>
        </div>
        <div class="info-btn">
          <div class="am-btn am-btn-danger" v-on:click="bindPhone()">保存修改</div>
        </div>

      </form>

    </div>
  </div>
</template>
<script>
export default {
  name: 'bindemail',
  data () {
    return {
      old:null,
      now:null,
      oldVerify:"",
      nowVerify:""
    }
  },
  components: {
   
  },
  mounted () {
    this.axios.get("/user/email").then((res)=>{
      var result = res.data;
      if(result.code == 200){
        this.old = result.data;
      }
    })
  },
  methods: {
    getVerify(phone){
      this.axios.get("/user/restVerify",{
        params:{
          phone:phone,
          type:2
        }
      }).then((res)=>{
        var result = res.data;
        if(result.code == 200){
          this.$layer.msg("验证码发送成功");
        }else{
          this.$layer.msg((result.msg==null||""?"验证码发送失败":result.msg))
        }
      })
    },
    bindPhone(){
      this.axios.put("/user/email",{
        old:this.old,
        now:this.now,
        oldVerify:this.oldVerify,
        nowVerify:this.nowVerify
      }).then((res)=>{
        var result = res.data;
        if(result.code==200){
          this.$layer.msg("绑定成功");
          this.$router.push({
            name:'securityli'
          })
        }else{
          this.$layer.msg((result.msg==null||""?"绑定失败":result.msg))
        }
      })
    }
  }
}
</script>
<style scoped>
@import "../../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../../assets/css/personal.css";
@import "../../../../assets/css/stepstyle.css";
</style>
